<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

    <head>
        <title>Realtime web chat</title>
        <meta http-equiv="Cache-Control"
              content="no-store; no-cache; must-revalidate; max-age=0; charset=UTF-8; width=device-width; initial-scale=1.0"
              name="viewport" />
        <link rel="stylesheet" type="text/css" media="all" href="assets/lib/bootstrap/css/bootstrap.css"
              th:href="@{assets/lib/bootstrap/css/bootstrap.css}" />
        <link rel="stylesheet" type="text/css" media="all" href="assets/common/main.css"
              th:href="@{assets/common/main.css}" />
    </head>

    <body>
        <div class="container">
          <div id="heading" class="masthead">
            <div class="pull-right">
              <span class="text-info" data-bind="text: username"><em></em></span>&nbsp;
              <button data-bind="click: logout" class="btn-md"><i class="glyphicon glyphicon-off"></i></button>
            </div>
            <h3 class="muted">Realtime web chat</h3>
          </div>
          <div id="main-content">
            <div id='users'>
                <h5 class="muted">Users online:</h5>
                <ul class='list-inline list-users' data-bind="foreach: users">
                    <li>
                        <i class="glyphicon glyphicon-user pull-left"></i>
                        <span class="text-info" data-bind="text: $data"></span>
                    </li>
                </ul>
            </div>
            <form data-bind="submit: sendMessage" class="form-inline form-message" role="form">
                <div class="row">
                  <div class="col-xs-8 col-sm-6 col-md-8">
                    <input id="chat-input" type="text" class="form-control">
                  </div>
                  <div class="col-xs-4 col-md-4">
                    <button type="submit" class="btn btn-default">
                        <i class="glyphicon glyphicon-send"></i>
                    </button>
                  </div>
                </div>
            </form>
            <div id='chat-history'>
                <ul class='list-group' data-bind="foreach: {data: messages, beforeRemove: hideElement, afterAdd: showElement}">
                    <li class='list-group-item'>
                        <i class="glyphicon glyphicon-user pull-left"></i>
                        <span class="text-info" data-bind="text: username"></span>
                        <i class="glyphicon glyphicon-comment"></i>
                        <span data-bind="text: text"></span>
                    </li>
                </ul>
            </div>
          </div>
        </div>
        <!-- 3rd party -->
        <script src="assets/lib/jquery/jquery.js"></script>
        <script src="assets/lib/bootstrap/js/bootstrap.js"></script>
        <script src="assets/lib/knockout/knockout.js"></script>
        <script src="assets/lib/sockjs/sockjs.js"></script>
        <script src="assets/lib/stomp/dist/stomp.js"></script>

        <!-- application -->
        <script src="chat.js"></script>
        <script type="text/javascript">
            var model;
            var init = function() {
                var socket = new SockJS('/wschat/wschat');
                var client = Stomp.over(socket);
                var debug = function(str) {
                    console.log(str);
                  };
                client.debug = debug;
                model = new ApplicationModel(client);
                ko.applyBindings(model);
                model.connect();
                $("#chat-input").focus();
            };
            window.onload = init;
        </script>

    </body>
</html>
